學習日誌15-event(事件)1

11th鐵人賽

古德瑞

2019-09-30 22:36:43

487 瀏覽

分享至

什麼是事件

網頁能夠回應訪客所有不同的動作稱為 event(事件)，事件能夠辨識網頁載入、滑鼠移動、鍵盤按鍵等動作。
事件可偵測用戶做了什麼事情，接收訊息後採取相關動作，執行某個函式。
ex.

onload （頁面讀取完畢執行...）
onclick（按下按鈕執行...）
.....等

練習事件

ex. 按下按鈕 onclick事件

設定input是一個按鈕，其值 value = "點擊"
設定class綁定input，寫onclick及點擊之後的發生事件函式

//HTML
<body>
    <input type="button" value="點擊" class="btn">
</body>

//JavaScript
var el = document.querySelector('.btn');
el.onclick = function(e){
  console.log(e);
}

addEventListener事件監聽

事件綁定的方法，利用監聽得知事件是否啟動，確認啟動後就執行對應的函式。

建立一個變數el，使用querySelector去選取按鈕名字
對這el使用addEventListener監聽
addEventListener裡第一個是選擇事件click
第二個是帶入命名的function，也就是要做的事情
第三個是true和false，預設是false

var el = document.querySelector('.btn');
                 
//監聽寫法           // 選擇事件、代入function、false
el.addEventListener('click',function(e){ alert('hello');},false)